<template>
    <div class="nav-left" ref="customRef">

        <a @click="logoClick" class="logo" :alt="siteConf.site_name" style="height: auto !important;"
            :title="siteConf.site_name">
            <img :src="logoActive == 1 ? siteConf.logo2 : siteConf.logo2" style="width: 146px; height: 40px;"
                :alt="siteConf.site_name" :title="siteConf.site_name">
        </a>
        <!-- 头部start -->
        <ul class="left-nav-list">
            <li v-for="(item, index) in navigaionList" :key="index" class="left-nav-item d3-nav-item"
                :class="(index) == isActive ? 'hover-css' : ''" @mouseover="handleMouseEnter(index)"
                @mouseleave="handleMouseLeave()"><a @click="navigaionClick(item)">{{ item['title'] }}</a>
                <div class="subnav-model-classification">
                    <classiFication :productList="item['children']" :parentIndex="index" :allList="item">
                    </classiFication>
                </div>
            </li>
            <li id="more-nav-item" class="left-nav-item more-nav-item" @mouseover="moreMouseEnter()"
                @mouseleave="moreMouseLeave()" :class="isActiveMore ? 'hover-css' : ''" data-is-buried="1">
                <span class="list-retract-css" style="cursor: pointer;">
                    <el-icon size="24">
                        <Grid />
                    </el-icon>
                </span>
                <div class="subnav-model-classification">
                    <div class="more-left">
                        <div class="cate_channel">
                            <div class="list-class-left">
                                <ul>
                                    <li v-for="(item, index) in navConfig.click_menu['children']" :key="index">
                                        <a  style="cursor: pointer;" herf="javascript:void(0);" @click="bigTypeClick(item)"
                                            :style="navConfig.two_active_id == item.id ? 'color: #e95513;' : ''">{{
                                            item['title'] }}</a>
                                        <a  style="cursor: pointer;" :style="navConfig.three_active_id == child.id ? 'color: #fff; background: #e95513;' : ''"
                                            v-for="(child, child_index) in item['children']" :key="child_index"  @click="smallTypeClick(item,child)"
                                            herf="javascript:void(0);"> {{ child['title'] }}</a>
                                    </li>
                                </ul>
                            </div>

                        </div>
                    </div>
                </div>
            </li>
        </ul>
        <!-- 头部end -->
    </div>
    <!-- 吸顶搜索start -->
    <div class="nav-search-content js-new-search-box">
        <div class="nav-search-input js-new-search-input">
            <span class="select-class">
                <div class="select-class-box">
                    <span class="select-class-txt" style="color: #e95513;">{{ navConfig.click_menu['title'] }}</span>
                    <el-icon color="#e95513">
                        <ArrowDown />
                    </el-icon>
                </div>
                <ul class="select-type-list">
                    <li class="select-type-itme" @click="navigaionClick(item)"
                        :style="navConfig.click_menu['id'] === item['id'] ? 'background: #e95513;' : ''"
                        v-for="(item, index) in navigaionList" :key="index" :data-id="item['id']">{{ item['title'] }}</li>
                </ul>
            </span>
            <!-- <span class="select-class">
            {{ navConfig.click_menu['title']
        }}
            </span> -->
            <input class="search-keyword js-nav-search" type="text" v-model="search.searchValue" placeholder="搜索ID、关键词"
                @keyup.enter="handleSearch"><label for="newNavUploaderInput" class="search_image_search"
                style="display: inline;">
            </label>
            <el-icon class="icon del_key_display" @click="clearClick()"
                :style="{ display: showIcon ? 'inline-block' : 'none' }">
                <Close />
            </el-icon>

        </div>
        <!-- <div class="newnav-related-search js-new-related-search">
            <div class="line"></div>
            <div class="hover-line"></div>
            <div class="search-title">
                <span data-id="1" class="active">3D模型</span>
            </div>
            <div class="close-icon js-nav-search-close">
                <el-icon>
                    <Close />
                </el-icon>
            </div>

            <div class="newhead-related-search">

                <div class="item-related-search search-related-kyeword" style="display: block;">
                    <p class="related-title">
                        热门搜索
                        <svg class="icon icon_search_hot" aria-hidden="true">
                            <use xlink:href="#icon-search_pop_icon_hot"></use>
                        </svg>
                    </p>
                    <div class="related-search-class clearfix">
                        <a v-for="(v, i) in hotSearchList" :key="i" href="#" class="js_hot_keyword">{{ v['title'] }}</a>
                    </div>
                </div>
            </div>
        </div> -->

    </div>
    <!-- 吸顶搜索end -->
    <!-- 头部右侧充值，登录--->
    <ul class="nav-right">
        <li id="recharge-nav-item" class="right-nav-item recharge-nav-item" v-if="siteConf.ad.is_head_recharge"><a
                style="align-items: center;display: flex;" @click="openJbClick">
                <el-icon size="24px">
                    <SvgIcon iconName="icon-money-rmb" />
                </el-icon>
                <span>充值</span></a>
            <div class="subnav-warp subnav-recharge-warp"><a @click="openJbClick" class="recharge-item">下载币充值
                    <i></i></a>
            </div>
        </li>
        <li id="vip-nav-item" class="right-nav-item vip-nav-item js_RightNewvipBox" v-if="siteConf.ad.is_head_vip">
            <a @click.stop="openVipClick" style="align-items: center;display: flex;">
                <el-icon size="24px">
                    <SvgIcon iconName="icon-vip" />
                </el-icon><span>VIP</span>
            </a>
            <div class="subnav-warp subnav-vip-content"
                :style="userInfo.isLogin() ? 'display: block;' : 'display: none;'">
                <div class="vip-name" v-if="userInfo.user_type == 1">尊贵的VIP会员</div>
                <div class="vip-name" v-else-if="userInfo.user_type == 2">尊贵的全站VIP会员</div>
                <div class="vip-name" v-else="userInfo.user_type == 0">您的VIP已过期</div>
                <div class="vip-info">专区免费下、渲染7折等40项特权</div>
                <div class="vip-infoClass">
                    <div class="title">VIP尊享素材/渲染/自学贵族多项特权</div>
                    <div class="subnav-vip-weight ">
                        <a class="goto-open"><i></i>
                            <p>VIP模型免费下</p>
                        </a>
                        <a class="goto-open">
                            <i></i>
                            <p>VIP素材免费下</p>
                        </a>
                        <a class="goto-open">
                            <i class="icon-weight9"></i>
                            <p>模型下载折扣</p>
                        </a>
                        <a class="goto-open"><i></i>
                            <p>云渲染低至7折</p>
                        </a>
                        <a class="goto-open"><i></i>
                            <p>专区课程免费看</p>
                        </a>
                        <a class="goto-open"><i></i>
                            <p>每月会员礼包</p>
                        </a>
                    </div>
                    <a href="#" class="vip-gift-pack" rel="nofollow">
                        <span class="">快速领取</span>
                    </a>
                    <div class="subnav-vip-operation">
                        <a class="href-vip-privilege" @click="isOpen" rel="nofollow">更多特权<i></i></a>
                    </div>
                    <div class="vip-info-tip">VIP专享附加权益:模型重复下载 永久免费</div>
                </div>
                <a class="vip-operation goto-open" @click="openVipClick">立即续费</a>
            </div>
        </li>
        <!--未登录后的 -->
        <li v-if="!userInfo.isLogin()" id="login-nav-item" class="right-nav-item login-nav-item js_user_login"
            style="display: list-item;">
            <span class="user-login-icon" @click="loginClick">登录/注册</span>
            <!-- <div class="subnav-warp subnav-login-warp">
                <div class="not-login-content">
                    <div class="not-login-hd" @click="loginClick">
                        <img :src="siteConf.default_head" alt="">
                        <div class="hd-text"><span>登录/注册</span> 登录后您将获得：</div>
                    </div>
                    <ul class="not-login-bd">
                        <li class="bd-item">
                            <div class="item-icon"><svg class="icon" aria-hidden="true">
                                    <use xlink:href="#icon-nav_login-recommen"></use>
                                </svg></div>
                            <div class="item-info">
                                <div class="title">精准推荐</div>
                                <div class="desc">精准优质的内容推荐</div>
                            </div>
                        </li>
                        <li class="bd-item">
                            <div class="item-icon"><svg class="icon" aria-hidden="true">
                                    <use xlink:href="#icon-nav_login_cash"></use>
                                </svg></div>
                            <div class="item-info">
                                <div class="title">现金分成</div>
                                <div class="desc">上传模型享5:5现金分成</div>
                            </div>
                        </li>
                        <li class="bd-item">
                            <div class="item-icon"><svg class="icon" aria-hidden="true">
                                    <use xlink:href="#icon-nav_login_equipment"></use>
                                </svg></div>
                            <div class="item-info">
                                <div class="title">多端同步</div>
                                <div class="desc">收藏内容，多端同步查看</div>
                            </div>
                        </li>
                        <li class="bd-item">
                            <div class="item-icon"><svg class="icon" aria-hidden="true">
                                    <use xlink:href="#icon-nav_login_720free"></use>
                                </svg></div>
                            <div class="item-info">
                                <div class="title">免费合成</div>
                                <div class="desc">免费合成720全景作品</div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div> -->
        </li>
        <!--登录后的 -->
        <li v-if="userInfo.isLogin()" id="login-nav-item" class="right-nav-item login-nav-item js_user_login"
            style="display: list-item;">
            <a rel="nofollow" @click="userInfoClick('/userhome')">
                <img class="user-img" :src="userInfo.avatar" @error.once="useDefaultImage">
                <!-- <span class="message-num">2</span> -->
            </a>
            <div class="subnav-warp subnav-login-warp">
                <div class="top-warp-contnet bg_generally">
                    <div class="vip-icon"></div>
                    <div class="user-info">
                        <div class="user-info-headerimg clearfix">
                            <a rel="nofollow" href="#" class="user-portrait ">
                                <img :src="userInfo.avatar">

                            </a>
                            <div class="personal-information">
                                <h3 class="name-personal">{{ userInfo.username }}</h3>
                                <p class="user-id">ID:<span class="user-id">{{ userInfo.label_id }}</span></p>
                                <div style="color: #5c5c5c; font-size: 12px;">{{ userInfo.user_type == 0 ? '暂未开通会员' :
                                    userInfo.user_type == 1 ? '您的VIP于' + userInfo.expiration_time + '到期' : '您的全站VIP于' +
                                        userInfo.expiration_time + '到期'
                                }}</div>
                            </div>
                        </div>
                        <div class="to-vip" v-if="userInfo.user_type == 0 && siteConf.ad.is_head_vip">
                            <div class="left-ext">开通VIP可畅享更多特权</div>
                            <a class="right-btn" @click.stop="openVipClick">开通</a>
                        </div>

                    </div>
                    <div class="common-functions">

                        <div class="link-user-administration">
                            <a @click="userInfoClick('/userhome')">
                                <span>个人中心</span>
                                <i class="icon-arrow">
                                    <svg class="icon" aria-hidden="true">
                                        <use xlink:href="#icon-direction_single_arrow_light_s"></use>
                                    </svg>
                                </i>
                            </a>
                            <a rel="nofollow" @click="userInfoClick('/user_collect')">
                                <span>我的收藏</span>
                                <i class="icon-arrow">
                                    <svg class="icon" aria-hidden="true">
                                        <use xlink:href="#icon-direction_single_arrow_light_s"></use>
                                    </svg>
                                </i>
                            </a>

                            <a rel="nofollow" @click="userInfoClick('/user_footprint')">
                                <span>浏览足迹</span>
                                <i class="icon-arrow">
                                    <svg class="icon" aria-hidden="true">
                                        <use xlink:href="#icon-direction_single_arrow_light_s"></use>
                                    </svg>
                                </i>
                            </a>
                            <a rel="nofollow" @click="userInfoClick('/recharge_order')">
                                <span>订单管理</span>
                                <i class="icon-arrow">
                                    <svg class="icon" aria-hidden="true">
                                        <use xlink:href="#icon-direction_single_arrow_light_s"></use>
                                    </svg>
                                </i>
                            </a>

                            <a rel="nofollow" @click="userInfoClick('/account_sys')">
                                <span>账号设置</span>
                                <i class="icon-arrow">
                                    <svg class="icon" aria-hidden="true">
                                        <use xlink:href="#icon-direction_single_arrow_light_s"></use>
                                    </svg>
                                </i>
                            </a>

                        </div>
                        <div class="user-log-out" @click="outLogin">退出登录</div>
                    </div>
                </div>
            </div>
        </li>
    </ul>
</template>
<script lang="ts" setup>
import { ref, onMounted, nextTick, computed } from 'vue'
import { useUserInfo } from '../stores/userInfo'
import { doLogout } from '../api/home/index'
import { Local } from '../utils/storage'
import router from '../router'
import classiFication from '../components/classiFication.vue';
import eventBus from '../utils/event-bus';
import { useSiteConfig } from '../stores/siteConfig'
import { useNavConfig } from '../stores/navConfig'
defineProps(['logoActive', 'hotSearchList']);
import { ElMessage, ElLoading } from "element-plus";
import {
    webSiteConfig, getNavigaion
} from "../api/home/index";
import { useSearch } from "../stores/search";
const search = useSearch()
const userInfo = useUserInfo() //获取用户信息
const siteConf = useSiteConfig()
const navConfig = useNavConfig()
const checkMenu: any = navConfig.click_menu

//菜单
const isActiveMore = ref(false)

const moreMouseEnter = () => {

    isActiveMore.value = true;

}

const moreMouseLeave = () => {

    isActiveMore.value = false;

}



const isActive = ref(-1);
//导航栏触发特效
const handleMouseEnter = (i: any) => {
    isActive.value = i

};
const handleMouseLeave = () => {
    isActive.value = -1
};
//监听input 搜索框的值   
const showIcon = computed(() => search.searchValue.trim() !== '');

const useDefaultImage = (event: any) => {
    event.target.src = siteConf.default_head
}

//获取div层的属性
const customRef = ref<HTMLElement | null>(null);
const customFun = () => {
    if (customRef.value) {
        const customData = customRef.value.getAttribute('data-custom');
        return customData
    }
}

//登录弹窗
const loginClick = () => {
    eventBus.emit('customEvent', {
        dis: true
    })

}
//开通vip 弹窗
const openVipClick = () => {
    if (!userInfo.isLogin()) {
        loginClick()
    } else {
        if (isEmpty(userInfo.mobile)) {
            ElMessage.error("请绑定手机号");
            setTimeout(() => {
                router.push({ path: '/account_sys' })
            }, 2000)
            return
        } else {
            eventBus.emit('openVipCustomEvent', {
                dis: true
            })
        }
    }
}
//判断字符串是否为空
const isEmpty = (str: string) => {
    return !str;
}
//下载币弹窗
const openJbClick = () => {
    nextTick(() => {
        router.push({ name: '/recharge' })
    })
    // if (!userInfo.isLogin()) {
    //     loginClick()
    // } else {
    //     eventBus.emit('openJbCustomEvent', {
    //         dis: true
    //     })
    // }
}

//提示
const isOpen = () => {
    ElMessage.error("开通中...");
}

//清空搜索
const clearClick = () => {
    if (userInfo.isLogin()) {
        search.clearSearchValue()
        //执行
        eventBus.emit('initProduct')
        nextTick(() => {
            router.push({ name: '/product' })
        })
    }

}
//enter触发搜索
const handleSearch = () => {
    if (userInfo.isLogin()) {
        search.setSearchValue(search.searchValue)
        eventBus.emit('initProduct')
        nextTick(() => {
            router.push({ name: '/product' })
        })
    }

}


//退出登录
const outLogin = () => {
    const loading = ElLoading.service({
        lock: true,
        text: '请稍等,正在退出...',
        background: 'rgba(0, 0, 0, 0.7)',
    })
    doLogout({ refreshToken: userInfo.refreshToken }).then((res: any) => {
        Local.remove('userInfo')
        loading.close()
        router.go(0)
    }).catch((err: any) => {
        console.log(err)
    }).finally(() => {
        loading.close()
    });
}


const navigaionClick = (item: any) => {

    navConfig.dataFill(item)
    navConfig.removeMenu()
    navConfig.setClickGrade(1);
    navConfig.setTwoActiveId(0);
    navConfig.setProductPid(item['id'])
    navConfig.setSelectType('all')
    eventBus.emit('initProduct')
    nextTick(() => {
        router.push({ name: '/product' })
    })
}

//大类
const bigTypeClick = (child: any) => {

   eventBus.emit('bigTypeClick',{
    child:child
   })
};
//细分
const smallTypeClick = (item:any,child: any) => {
   bigTypeClick(item)
   eventBus.emit('smallTypeClick',{
    child:child
   })
};



//配置文件
const configSite = () => {
    webSiteConfig().then((res: any) => {
        if (res.code === 1) {
            siteConf.dataFill(res.data.list)
        }
    });
}

//获取导航栏数据
const navigaionList = ref([]); //导航栏数据
const navList = () => {
    getNavigaion({}).then((res: any) => {
        if (res.code === 1) {
            navConfig.setHeadNav(res.data.list.all)
            navigaionList.value = res.data.list.all;
        }
    });
}

const logoClick = () => {
    router.push({ path: '/dashboard' })
}
onMounted(() => {
    configSite()
    navList()
})

//个人中心
const userInfoClick = (url: string) => {
    router.push({ path: url })
}

defineExpose({ customFun })

</script>

<style></style>